<template>
  <div class="container_box">
    <div class="scroll_container">
      <el-descriptions title="自定义表格组件">
        <el-descriptions-item label="描述">
          自己封装的自定义表格组件，可以自定义表格的列，数据，操作等，可以满足大部分的业务场景。
        </el-descriptions-item>
      </el-descriptions>
      <DataTable
        :columnData="columnData"
        :tableData="tableData"
        stripe
        :border="true"
        size="default"
        :operateConfig="operateConfig"
        :selection="true"
        :showIndex="true"
        :showFilter="true"
      >
        <template #operate="{ row }">
          <el-link @click="openDialog('details', row)">详情</el-link>
          <el-divider direction="vertical" />
          <el-link @click="openDialog('declare', row)">删除</el-link>
        </template>
      </DataTable>
      <el-descriptions title="自定义表格组件2" style="margin-top: 20px">
        <el-descriptions-item label="描述">
          封装的可输入表格组件，可以自定义表格的列数、表格头、输入框个数、校验小数点位数等，可以特定场景下表格输入的业务场景。
        </el-descriptions-item>
      </el-descriptions>
      <el-button-group class="btn_group">
        <el-button
          type="primary"
          @click="toggleTable('time96')"
          :class="btnActiveType === 'time96' ? 'btnActive' : ''"
        >
          96点数据
        </el-button>
        <el-button
          type="primary"
          @click="toggleTable('time24')"
          :class="btnActiveType === 'time24' ? 'btnActive' : ''"
        >
          24点数据
        </el-button>
      </el-button-group>
      <div class="flex gap-4 mb-4" style="margin: 12px 0">
        <span style="margin-right: 12px">改变列数</span>
        <el-input
          v-model="colNums"
          style="width: 120px"
          placeholder="输入列数"
          type="number"
          @blur="colNumsChange"
        />
        <span style="margin: 0 12px">改变校验小数点位数</span>
        <el-input
          v-model="decimalPointNums"
          style="width: 120px"
          placeholder="输入位数"
          type="number"
        />
      </div>
      <div class="time_box" style="margin: 12px 0">
        <span>改变时段：</span>
        <el-select
          v-model="declareAdjustmentForm.startTime"
          placeholder="请选择开始时间"
          class="mr-4"
          filterable
          style="width: 200px"
          @change="changeDeclareAdjustment"
        >
          <el-option
            v-for="time in startTimeOptions"
            :key="time"
            :label="time"
            :value="time"
          ></el-option>
        </el-select>
        <el-select
          v-model="declareAdjustmentForm.endTime"
          placeholder="请选择结束时间"
          class="mr-4"
          filterable
          style="width: 200px"
          @change="changeTimeQuantumMapping"
        >
          <el-option
            v-for="time in endTimeOptions"
            :key="time"
            :label="time"
            :value="time"
          ></el-option>
        </el-select>
      </div>
      <TimeNodeTable
        ref="timeNodeTable"
        :headerInfo="headerInfo"
        :timeQuantumMapping="timeQuantumMapping"
        :number="Number(colNums)"
        :decimalPointNums="Number(decimalPointNums)"
      />
      <el-button type="primary" @click="sumbit" style="margin-top: 12px">
        提交数据
      </el-button>
      <div class="flex gap-4 mb-4" style="margin: 12px 0">
        <span style="margin-right: 12px">数据展示:</span>
        {{ timeDataArr }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref } from "vue";

/* table组件相关start */
const columnData = [
  {
    id: "date",
    label: "日期",
  },
  {
    id: "name",
    label: "姓名",
  },
  {
    id: "address",
    label: "地址",
  },
];
const operateConfig = {
  width: "180",
  label: "操作",
};

const state = reactive({
  tableData: [
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-02",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-04",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
  ],
});
const { tableData } = toRefs(state);

const openDialog = () => {};
/* table组件相关end */

/* timeNodeTable组件相关start */
import timeMapping from "@/assets/json/timeMapping.json";
import timeMapping24h from "@/assets/json/timeMapping24h.json";
import { generateTimeObject } from "@/utils";

const timeNodeTable = ref(null);

const headerInfo = ref(["时间", "数据"]);
const timeDataArr = ref([]);
const timeQuantumMapping = ref(timeMapping);
const btnActiveType = ref("time96");
const colNums = ref(8);
const decimalPointNums = ref(5);
const declareAdjustmentForm = ref({
  startTime: "",
  endTime: "",
});
const startTimeOptions = ref([]);
const endTimeOptions = ref([]);

// 编辑切换
const toggleTable = (type) => {
  if (type === "time24") {
    timeDataArr.value = [];
    timeQuantumMapping.value = timeMapping24h;
    btnActiveType.value = "time24";
  } else {
    timeDataArr.value = [];
    timeQuantumMapping.value = timeMapping;
    btnActiveType.value = "time96";
  }
};

const colNumsChange = () => {
  timeNodeTable.value.getColumn();
};

// 改变时段开始时间
const changeDeclareAdjustment = (val) => {
  if (val) {
    endTimeOptions.value = timeOptions(
      Number(val.split(":")[0]) - 0,
      Number(val.split(":")[1]) / 15,
    );
    declareAdjustmentForm.value.endTime = "";
  }
};

const changeTimeQuantumMapping = (val) => {
  if (val) {
    timeQuantumMapping.value = generateTimeObject(
      declareAdjustmentForm.value.startTime,
      declareAdjustmentForm.value.endTime,
    );
    colNums.value = Object.values(timeQuantumMapping.value).length;
    if (timeQuantumMapping.value.length >= 8) colNums.value = 8;
    colNumsChange();
  }
};

const sumbit = () => {
  timeDataArr.value = timeNodeTable.value.timeData;
};

// 96点时间选项
const timeOptions = (h, m) => {
  const options = [];
  let hour = h ? h : 0;
  let minute = m ? m * 15 : 15; // 开始时间
  while (hour < 24 || (hour === 24 && minute === 0)) {
    let time = `${hour.toString().padStart(2, "0")}:${minute
      .toString()
      .padStart(2, "0")}`;
    options.push(time);
    minute += 15;
    if (minute === 60) {
      hour++;
      minute = 0;
    }
  }
  return options;
};

const init = () => {
  startTimeOptions.value = timeOptions();
};

init();
</script>

<style lang="less" scoped>
.btn_group {
  display: flex;
  margin: 12px 0;
}
.btnActive {
  background-color: #088692;
  color: #38e0df !important;
}
</style>
